<template>
    <van-nav-bar title="我的收藏" left-text="返回" left-arrow @click-left="onBack" />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-swipe-cell v-for="item in productdata" :key="item.id">
                <van-card :price="item.product.price" :desc="item.product.name" :title="item.product.name"
                    class="goods-card" :thumb="item.product.thumbs_cdn[0]" />
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" />
                </template>
            </van-swipe-cell>
        </van-list>
    </van-pull-refresh>
</template>
<script setup>
import { getCurrentInstance, reactive, onMounted, ref } from 'vue'
const { proxy } = getCurrentInstance();
const business = reactive(proxy.$cookies.get('business'));
//商品的数据
const productdata = ref([]);
console.log(productdata.value);
//懒加载效果
const loading = ref(false);
//加载结束状态
const finished = ref(false);
//加载的状态
const refreshing = ref(false);
//显示的页码
const page = ref(1);
//数据显示10条
const limit = ref(5);
//数据的总数
const listCount = ref(0);

onMounted(() => {
    getcollection();
})
// 上拉加载
const onLoad = async () => {
    if (productdata.value.length < listCount.value) {
        page.value += 1;
        await getcollection();
    } else {
        finished.value = true;
        loading.value = false;
    }
};

// 下拉刷新
const onRefresh = async () => {
    page.value = 1;
    productdata.value = [];
    finished.value = false;
    loading.value = true;
    await getcollection(); // 刷新页面数据
    refreshing.value = false;
};
//获取购物车数据
const getcollection = async () => {
    let data = {
        busid: business.id,
        page: page.value,
        limit: limit.value
    }
    let result = await proxy.$Api.Collectiondata(data);
    if (result && result.code == 1) {
        finished.value = false;
        loading.value = false;

        listCount.value = result.data.typeCount;
        productdata.value.push(...result.data.collection);
        if (productdata.value.length === listCount.value) {
            finished.value = true;
            loading.value = false;
            return;
        }
    } else {
        finished.value = true;

        return;
    }
}
//放回按钮
const onBack = () => {
    proxy.$router.back();
}
</script>
<style>
.goods-card {
    margin: 0;
    background-color: #fff;
}

.delete-button {
    height: 100%;
}
</style>